<template>
  <div class="height-full">
    <div class="ml10 d-flex flex-ju-sb flex-a-c">
      <div class="title-line list-caption">
        我的稿件
        <!-- （稿件上传额度：
      <span class="text-highlight">10篇/日</span>
      当前主题今日还可上传
      <span class="text-highlight">3篇</span>
      ） -->
      </div>

      <div>
        <Tooltip
          v-permission="'article/product/audit'"
          content="请选择数据"
          :disabled="Boolean(selection.length)"
          placement="top"
          theme="light"
        >
          <Button type="primary" @click="handleBatchAudit">批量审核</Button>
        </Tooltip>
        <Button v-permission="'article/product/add'" type="primary" class="ml14" @click="visible.manu = true">
          录入稿件
        </Button>
      </div>
    </div>

    <div class="list-filter mt10">
      <Form class="custom-ivu-form" inline :label-width="80" @submit.native.prevent="handleFormSubmit">
        <FormItem label="所属主题">
          <Select v-model="formData.theme" class="form-item--width" clearable @on-change="handleFormSubmit">
            <Option v-for="(nt, i) of themeList" :key="i" :value="nt.key">{{ nt.value }}</Option>
          </Select>
        </FormItem>

        <FormItem label="产品分类">
          <Select
            v-model="formData.product"
            class="form-item--width"
            element-id="select2"
            clearable
            @on-change="handleFormSubmit"
          >
            <Option v-for="(nt, i) of productList" :key="i" :value="nt.key">{{ nt.value }}</Option>
          </Select>
        </FormItem>

        <FormItem>
          <template #label>
            <KeywordsSelect :keyword.sync="keyword"></KeywordsSelect>
          </template>
          <Input
            v-model="formData[keyword.key]"
            :label-width="60"
            placeholder="请输入"
            class="form-item--width"
            size="large"
            clearable
          ></Input>
        </FormItem>

        <FormItem label="稿件状态">
          <Select
            v-model="formData.state"
            class="form-item--width"
            element-id="select2"
            clearable
            @on-change="handleFormSubmit"
          >
            <Option v-for="(nt, i) of stateList" :key="i" :value="nt.key">{{ nt.value }}</Option>
          </Select>
        </FormItem>

        <FormItem label="时间范围" class="width-auto">
          <TimeRange
            v-model="formData.timeType"
            @on-time-type-change="handleTimeTypeChange"
            @on-date-range-change="handleTimeRange"
          />
        </FormItem>

        <Button class="btn-search" type="primary" html-type="submit">查询</Button>
      </Form>
    </div>

    <div class="list-table-box mt12">
      <div class="list-caption f16">稿件列表</div>

      <CommonTablePage
        :loading="tableLoading"
        :columns="columns"
        :tableData="tableData"
        :total="pagination.total"
        @on-selection-change="handleTableSelect"
        @on-sort-change="handleTableSort"
        @on-change="handlePageChange"
        @on-page-size-change="handlePageSizeChange"
      ></CommonTablePage>
    </div>

    <ModalConfrim :visible.sync="visible.audit" title="审核" @on-ok="modalAuditOk" @on-no="modalAuditCancel">
      <p class="text-center f14">是否通过审核？</p>
    </ModalConfrim>

    <ModalUploadManu
      :visible.sync="visible.manu"
      ref="modalUploadRef"
      @on-submit="handleModalUploadSubmit"
    ></ModalUploadManu>
  </div>
</template>

<script>
// components
import KeywordsSelect from '@/components/common/KeywordsSelect/KeywordsSelect'
import CommonTablePage from '@/components/common/CommonTablePage/CommonTablePage'
import ModalConfrim from '@/components/common/ModalConfrim/ModalConfrim'
import ModalUploadManu from '@/components/common/ModalUploadManu/ModalUploadManu'
import TimeRange from '@/components/customFrom/TimeRange'

// util
import { createCommonPagination, createForm } from '@/utils/service.js'
import { createColumns } from './service'

// vuex
import { createNamespacedHelpers } from 'vuex'
const { mapActions } = createNamespacedHelpers('provideEnd')

/**
 * @desc 请求写在 mixin 中
 */
import mixin from './mixin'
export default {
  name: 'MyManuscript',

  components: { KeywordsSelect, CommonTablePage, ModalConfrim, ModalUploadManu, TimeRange },

  mixins: [mixin],

  data() {
    return {
      formData: createForm(),
      keyword: { key: 'title', value: '标题' },

      tableLoading: false,
      columns: createColumns(this),
      tableData: [],
      selection: [],
      currentEditItem: '',

      auditType: '', // 区分是 单条数据审核还是批量审核 single | batch

      pagination: createCommonPagination(),

      visible: {
        audit: false,
        manu: false,
      },
    }
  },

  computed: {
    themeList() {
      return this.$store.getters.themeList
    },
    productList() {
      return this.$store.getters.productList
    },
    stateList() {
      return this.$store.getters['provideEnd/stateList']
    },
    btn_batchAudit_Disabled() {
      const arr = this.selection
      if (!arr || !arr.length) return true
      return !arr.every((it) => it.state && it.state.key === 'EDITOR_AUDITING')
    },
  },

  watch: {
    'keyword.key'(v) {
      if (v === 'title') {
        this.formData.username = ''
      } else {
        this.formData.title = ''
      }
    },
  },

  methods: {
    ...mapActions(['getActicleStates']),

    handleBatchAudit() {
      if (!this.selection.length) return
      this.auditType = 'batch'
      this.visible.audit = true
    },

    handleTimeRange(date) {
      this.formData.startTime = date[0]
      this.formData.endTime = date[1]
      this.handleFormSubmit()
    },

    handleTimeTypeChange(v) {
      // console.log(v)
      if (v === '自定义') {
      } else {
        this.formData.startTime = ''
        this.formData.endTime = ''
        this.handleFormSubmit()
      }
    },

    handleFormSubmit(no_reset) {
      if (no_reset !== true) {
        this.formData.pageNo = 1
      }
      this.getMyManuscriptList({ ...this.formData })
    },

    handleTableSelect(selection) {
      this.selection = selection
    },

    handleTableSort({ column, key, order }) {
      // console.log(123, column, key, order)
      if (order === 'normal') return
      this.formData.desc = order === 'desc'
      this.handleFormSubmit()
    },

    handlePageChange(page) {
      this.formData.pageNo = page
      this.handleFormSubmit(true)
    },
    handlePageSizeChange(pageSize) {
      this.formData.pageSize = pageSize
      this.handleFormSubmit(true)
    },

    getIds() {
      if (this.auditType === 'single') {
        return this.currentEditItem.id
      } else if (this.auditType === 'batch') {
        return this.selection.map((it) => it.id).join()
      }
    },

    modalAuditOk() {
      // console.log('auditOk', this.getIds())
      this.articleAudit({ ids: this.getIds(), message: '', pass: true })
    },

    modalAuditCancel() {
      // console.log('no', this.getIds())
      this.articleAudit({ ids: this.getIds(), message: '', pass: false })
    },

    /* 操作 */
    handleAudit(row) {
      this.auditType = 'single'
      this.visible.audit = true
      this.currentEditItem = row
      /* const a = {
        ids: '', // ID列表，多个使用逗号(,)分割
        message: '', // 审核意见
        pass: '', // 是否通过审核
      } */
    },

    handleModalUploadSubmit(data) {
      // console.log(data)
      this.articleAdd(data)
      // this.$refs['modalUploadRef'].open_uploadScuuess()
    },
  },

  mounted() {
    this.getActicleStates()
    this.handleFormSubmit()
  },
}
</script>

<style lang="less" scoped></style>
